<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>李世霖作品集</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.cool-play {
			width: 100%;
			height: 100%;
			position: relative;
		}

		.cool-play:-webkit-full-screen {
			width: 100%;
			height: 100%;
		}


		.cool-play .cool-video .icon-c-loading {
			color: #FF6600;
			top: 50%;
			left: 50%;
			position: absolute;
			font-size: 40px;
			margin-left: -20px;
			margin-top: -20px;
			-moz-animation: spin 2s infinite linear;
			-o-animation: spin 2s infinite linear;
			-webkit-animation: spin 2s infinite linear;
			animation: spin 2s infinite linear;
			display: none;
		}

		.cool-play .video {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #000;
		}
		

		.voice {
			position: relative;
		}


		html,
		body {
			width: 100%;
			height: 100%;
			font-size: 16px;
			font-family: "微软雅黑";
		}

		.wrapper {
			width: 100%;
			height: 100%;
			position: relative;
		}

		.wrapper .cool-play {
			text-align: center;
			overflow: hidden;
		}

		.action-wrapper {
			height: 100%;
			width: 178vh;
			position: relative;
			display: inline-block;
		}

		ul,
		li {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.row {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
		}

		.col {
			width: 33%;
			height: 100%;
			position: relative;
		}

		.left-0 {
			display: inline-block;
			width: 100%;
			height: 100%;
		}

		.middle-0 {
			position: absolute;
			top: 57%;
			left: 0;
			height: 41%;
			width: 100%;
		}

		.a-right {
			position: absolute;
			width: 100%;
			height: 30%;
			left: 0;
		}

		.right-0 {
			top: 2.2%;
		}

		.right-1 {
			top: 35%;
		}

		.right-2 {
			top: 68%;
		}

		.middle-handler {
			cursor: pointer;
			height: 55%;
			width: 100%;
		}

		.overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1;
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.5s ease;
		}

		.modal {
			display: none;
			position: fixed;
			z-index: 1;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.modal-content {
			margin: 3% auto;
			width: 80%;
			height: 90%;
			position: relative;
			transition: transform 0.3s ease-in-out;
			transform: translate(-50%, -50%) scale(0);
		}

		.close {
			position: absolute;
			top: -54px;
			right: 0;
			font-size: 47px;
			font-weight: bold;
			color: #888;
			cursor: pointer;
		}

		.pdf-container {
			width: 100%;
			height: 100%;
		}
	</style>
</head>

<body>
	<!--播放器区域  开始-->
	<div class="wrapper">
		<div id="cool-play" class="cool-play">
			<div class="cool-video">
				<!-- <video id="video" class="video">
					<source src="project.mp4" type="video/mp4">
					</source>
					您的浏览器不支持 HTML5 video 标签。
				</video> -->
				<img id="video" class="video" src="project.png" alt="">
				<span class="icon-c-loading"></span>
			</div>
			<div class="action-wrapper">
				<ul class="row">
					<li class="col col-left">
						<a class="left-0" target="_blank"
							href="https://www.xinpianchang.com/a11161839?kw=%E5%8D%AB%E5%B2%97&from=search_post"></a>
					</li>
					<li class="col col-middle">
						<div class="middle-handler btn" id="pdfButton" onclick="showPDF()"></div>
						<a class="middle-0" target="_blank"
							href="https://www.xinpianchang.com/a11161839?kw=%E5%8D%AB%E5%B2%97&from=search_post"></a>
					</li>
					<li class="col col-right">
						<a class="a-right right-0" target="_blank"
							href="https://www.xinpianchang.com/a11076912?from=UserProfile"></a>
						<a class="a-right right-1" target="_blank"
							href="https://www.xinpianchang.com/a11383004?from=UserProfile"></a>
						<a class="a-right right-2" target="_blank"
							href="https://www.xinpianchang.com/a10843892?from=UserProfile"></a>
					</li>
				</ul>
			</div>
		</div>

	</div>
	<div id="pdfModal" class="modal">
		<div class="modal-content">
			<span class="close">&times;</span>
			<div class="pdf-container">
				<embed src="user.pdf" type="application/pdf" width="100%" height="100%">
			</div>
		</div>
	</div>
	<div class="overlay"></div>
	<script type="text/javascript">
		window.onload = function () {
			// var local1 = document.getElementById('video');
			// local1.autoplay = true; 
			// local1.loop = true;
			// local1.muted = true; 
			// if (local1.paused) {
			// 	local1.play();
			// } else {
			// 	local1.pause();
			// }
			var modal = document.getElementById("pdfModal");

			var closeBtn = document.getElementsByClassName("close")[0];


			closeBtn.onclick = function () {
				hidePDF()
			}

			window.onclick = function (event) {
				if (event.target == modal) {
					hidePDF()
				}
			}
		}

		function btn() {
			var local = document.getElementById('video');
			if (local.paused) {
				local.play();
			} else {
				local.pause();
			}
		}
		function showPDF() {
			var modal = document.getElementById("pdfModal");
			var modalContent = document.getElementsByClassName("modal-content")[0];
			var button = document.getElementById("pdfButton");
			modal.style.display = "block";
			modalContent.style.transform = "scale(0)";

			var buttonStyle = window.getComputedStyle(button);
			var buttonX = parseInt(buttonStyle.left) + parseInt(buttonStyle.width) / 2;
			var buttonY = parseInt(buttonStyle.top) + parseInt(buttonStyle.height) / 2;

			modalContent.style.left = buttonX + "px";
			modalContent.style.top = buttonY + "px";
			modalContent.style.transform = "scale(1)";

		}
		function hidePDF() {
			var modal = document.getElementById("pdfModal");
			var modalContent = document.getElementsByClassName("modal-content")[0];

			modalContent.style.transform = "scale(0)";

			setTimeout(function () {
				modal.style.display = "none";
			}, 300);
		}
	</script>
</body>

</html>